<link href="/static/css/plugins/dropzone/basic.css" rel="stylesheet">
<link href="/static/css/plugins/dropzone/dropzone.css" rel="stylesheet">
<link href="/static/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="/static/bootstrap-table/bootstrap-table.css">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>附件管理</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/">首页</a>
            </li>
            <li class="breadcrumb-item">
                <a href="/admin">后台</a>
            </li>
            <li class="breadcrumb-item active">
                <strong>附件管理</strong>
            </li>
        </ol>
    </div>
</div>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-4">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>快速上传</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <p>
                        采用<strong>Dropzone.js</strong>上传控件，选择文件后将会自动上传.
                    </p>

                    <form action="#" class="dropzone" id="dropzoneForm">
                        <div class="fallback">
                            <input name="file" type="file" multiple/>
                        </div>
                    </form>

                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>附件管理</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table id="attachment-list"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/bootstrap-table/bootstrap-table.js"></script>
<script src="/static/layer/layer.js"></script>
<!-- Jasny -->
<script src="/static/js/plugins/jasny/jasny-bootstrap.min.js"></script>
<!-- DROPZONE -->
<script src="/static/js/plugins/dropzone/dropzone.js"></script>

<script>
    Dropzone.autoDiscover = false;
    $("#dropzoneForm").dropzone({
        url: "/api/file/upload",
        maxFilesize: 20,
        dictDefaultMessage: "<strong>拖拽文件到此处或者点击此处选择文件进行上传. </strong></br>"
    });
    $('#attachment-list').bootstrapTable({
        url: '/api/file/list',
        responseHandler: responseHandler,
        onClickCell: dealOnClickCell,
        columns: [{
            field: 'Id',
            title: 'ID'
        }, {
            field: 'Name',
            title: '标题'
        }, {
            field: 'Path',
            title: '路径(点击复制链接)'
        }, {
            field: 'Created',
            title: '更新时间'
        }, {
            field: 'Option',
            title: '操作',
            align: 'center',
            formatter: operateFormatter,
            events: "operateEvents",
        }],
    });

    function responseHandler(res) {
        return res.data;
    }

    function dealOnClickCell(field, value, row, $element) {
        if (field === "Path") {
            var domain = window.location.host;
            var url = "http://" + domain + "/" + row.Path;
            var tag = document.createElement('input');
            tag.setAttribute('id', 'cp_path_input');
            tag.value = url;
            document.getElementsByTagName('body')[0].appendChild(tag);
            document.getElementById('cp_path_input').select();
            document.execCommand('copy');
            document.getElementById('cp_path_input').remove();
            layer.msg("链接复制成功", {time: 2000});
        }
    }

    function operateFormatter(value, row, index) {
        return [
            '<div class="operate-group">',
            '<a class="update layui-layer-btn0" href="#">修改</a>',
            '<a class="delete layui-layer-btn0" href="#">删除</a>',
            '</div>'
        ].join('');
    }

    window.operateEvents = {
        'click .update': function (e, value, row, index) {
            layer.open({
                type: 2,
                title: '修改分类信息',
                shadeClose: true,
                shade: 0.8,
                area: ['380px', '90%'],
                content: '/admin/file/update?id=' + row.Id //iframe的url
            });
        },
        'click .delete': function (e, value, row, index) {
            layer.confirm('确定删除？', function (index) {
                $.get("/api/file/delete?id=" + row.Id, function (res) {
                    if (res.error === 0) {
                        layer.open({
                            skin: 'layer-class',
                            title: res.title
                            , content: res.msg,
                            yes: function (index) {
                                window.location.href = "/admin/upload/local";
                            }
                        });
                    } else {
                        layer.msg(res.title + res.msg, {
                            icon: 2,
                            shade: [0.8, '#393D49'], // 透明度  颜色
                            time: 2000
                        });
                    }
                }, "json");
                layer.close(index);
            });
        }
    };
</script>